<template>
	<!-- 分类 -->
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view class="f-item b-b" @click="wholechange(index)" :class="wholeIndex == index ? 'active' : ''" v-for="(item, index) in cate" :key="index">
				<view :data-catelist="item._id">{{ item.name }}</view>
			</view>
			
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside">
			<view class="s-list">
				<view class="t-list">
					<view class="t-item" v-for="(ite, index) in items" :key="index" @click="goodslist" :data-listlist="ite._id">
						<image :src="ite.img"></image>
						<text class="s-item">{{ ite.name }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			wholeIndex: 0,
			_id: '',
			cate: [],
			cateList: [],
			host: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			lists:[],
			items:[]
		};
	},
	mounted() {
		this.getCate();
		this.getCateList()
	},
	methods: {
		// 实现切换功能
		wholechange(index) {
			console.log()
			this.wholeIndex = index;
			console.log(index);
			this.items=this.cate[index].children
			console.log(this.items);
		},
		// 分类
		getCate() {
			uni.request({
				url: this.host + '/api/get_cate',
				success: res => {
					console.log(res.data.data);
					this.cate = res.data.data;
					this.items=this.cate[0].children
					console.log(this.cate);
				}, //请求成功回调，带参数
				fail: () => {
					console.log('请求失败');
				} //请求失败
			});
		},
		
		//右边
		getCateList(options) {
			uni.request({
				url: this.host + '/api/get_cate',
				success: res => {
					this.cateList = this.items;
				}, //请求成功回调，带参数
				fail: () => {
					console.log('请求失败');
				} //请求失败
			});
		},
		//右侧点击事件
		goodslist(e){
			console.log(e);
			let listlist = e.currentTarget.dataset.listlist;
			uni.navigateTo({
				url: '/pages/product/list?cate_id='+ listlist,
			})
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	background-color: #f8f8f8;
}

.content {
	display: flex;
}
.left-aside {
	flex-shrink: 0;
	width: 200upx;
	height: 100%;
	background-color: #fff;
}
.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100upx;
	font-size: 28upx;
	color: $font-color-base;
	position: relative;
	&.active {
		color: $base-color;
		background: #f8f8f8;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 36upx;
			width: 8upx;
			background-color: $base-color;
			border-radius: 0 4px 4px 0;
			opacity: 0.8;
		}
	}
}

.right-aside {
	flex: 1;
	overflow: hidden;
	padding-left: 20upx;
}
.s-item {
	display: flex;
	align-items: center;
	height: 70upx;
	padding-top: 8upx;
	font-size: 28upx;
	color: $font-color-dark;
}
.t-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	background: #fff;
	padding-top: 12upx;
	&:after {
		content: '';
		flex: 99;
		height: 0;
	}
}
.t-item {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 176upx;
	font-size: 26upx;
	color: #666;
	padding-bottom: 20upx;

	image {
		width: 140upx;
		height: 140upx;
	}
}
</style>
